/*
 * Created: 2022-09-12 07:34:47
 * Author : 涛涛涛
 */

import React, { FC, useContext, useMemo } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import Taro, { useRouter } from '@tarojs/taro';
import { HomeContext } from '@/pages/components/RootPageComponent/RootPageComponentContext';
import LeftLogo from './LeftLogo/LeftLogo';
import LeftArrow from './LeftArrow/LeftArrow';
export interface IProps extends ICompProps {}
NavContent.defaultProps = {} as Partial<IProps>;
function NavContent(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('NavContent', className);
    const { headNavContentRightSlot, headNavLeftShow, leftTitle } = useContext(HomeContext);
    const CompLeft = useMemo(() => {
        if (headNavLeftShow === 'arrow') return <LeftArrow></LeftArrow>;
        if (headNavLeftShow === 'logo') return <LeftLogo leftTitle={leftTitle}></LeftLogo>;
    }, [headNavLeftShow, leftTitle]);
    return (
        <RootView className={localClassName} style={style}>
            {CompLeft}
            <View className="NavContent-right">
                <View className="NavContent-right-absolute">{headNavContentRightSlot}</View>
            </View>
        </RootView>
    );
}
export default React.memo(NavContent as FC<IProps>);
const RootView = styled(View)`
    &.NavContent {
        padding: 0 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32px;
        font-weight: 600;
        line-height: 32px;
        .NavContent-right {
            height: 100%;
            flex-grow: 1;
            position: relative;
            .NavContent-right-absolute {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        }
    }
`;
